<template>
<section class="container topic-list">
    <ul class="media-list">
        <li class="media" v-for="topic in topics">
            <div class="media-left">
                <a href="#">
            <img width="40" height="40" class="media-object" src="../../assets/img/avatar-default.png" alt="...">
          </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading"><router-link :to="{name : 'topic-detail', params : {id : topic.id}}">{{ topic.title }}</router-link></h4>
                <p>sueysok 回复了问题 • 2 人关注 • 1 个回复 • 187 次浏览 • 2017-10-20 13:45</p>
            </div>
        </li>
    </ul>
    <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="defaultPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
  </div>
</section>
</template>

<script>
import axios from 'axios'

export default {
	data () {
		return {
            topics : [],
            totalCount : 0,
            defaultPageSize : 5
        }
	},
    async created () {
        this.loadTopics(1, 5)
    },
    methods : {
        async loadTopics (page, pageSize) {
            const {data} = await axios.get(`/api/topics?_page=${page}&_limit=${pageSize}`)
            this.topics = data.topics
            this.totalCount = data.count
        },
        async handleSizeChange (pageSize) {
            this.defaultPageSize = pageSize
            this.loadTopics(1, pageSize)
        },
        async handleCurrentChange (page) {
            // alert(page)
            this.loadTopics(page, this.defaultPageSize)
        }
    }
}
</script>

<style>
	
</style>
